import './globals.css';
import type { Metadata } from 'next';
import '@fontsource/inter';
import { Bebas_Neue, Inter } from 'next/font/google';
import Header from '@/components/Header/Header';
import { ReactNode } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import AuthProvider from '@/providers/AuthProvider';
import MyThemeProvider from '@/providers/MyThemeProvider';
import { CssBaseline } from '@mui/material';

export const metadata: Metadata = {
    title: 'Online Store',
    description: 'Generated by create next app',
};

const bebasNeue = Bebas_Neue({
    weight: '400',
    subsets: ['latin'],
    variable: '--font-bebasNeue',
    preload: true,
});

const inter = Inter({ weight: '400', subsets: ['latin'], preload: true });

export default async function RootLayout({
    children,
}: {
    children: ReactNode;
}) {
    const session = await getServerSession(authOptions);
    return (
        <html lang="ru" className={`${bebasNeue.variable}`}>
            <AuthProvider session={session}>
                <MyThemeProvider>
                    <CssBaseline />
                    <body
                        className={`${inter.className} antialiased dark:bg-neutral-900`}
                    >
                        <Header />
                        <main className="container mb-20">{children}</main>
                    </body>
                </MyThemeProvider>
            </AuthProvider>
        </html>
    );
}
